<div class="container">
  <div class="intro markdown">
    <blockquote>
      <h3>Ledge（源自 know-ledge，意指承载物）知识平台是基于我们所进行的一系列 DevOps 实践、敏捷实践、精益实践提炼出来的知识体系。</h3>
    </blockquote>
    <h4>它可以帮助您的企业在数字化时代更好地前进。</h4>
  </div>

  <div class="period-title markdown">
    <h2 class="title intro">DevOps 元素周期表 —— 选择您的 DevOps 工具</h2>
  </div>
  <app-periodic-table
    [selectedMetal]="highlightState"
    (currentAtomCategory)="setCurrentAtomCategory($event)"></app-periodic-table>

  <div class="intro markdown second-header">
    <h4>它可以帮助您设计数字化时代的 DevOps 流程</h4>
    <h5>DevOps 运动的主要特点是强烈倡导对构建软件的所有环节 (从集成、测试、发布到部署和基础架构管理) 进行全面的自动化和监控。</h5>
  </div>
  <component-process-table class="process-bar" [tableValue]="processTemplate"></component-process-table>

  <div class="process-bar">
    <div class="markdown center">
      <h3>从而根据不同的企业情况，搭建出专属的 DevOps 流水线</h3>
    </div>
    <component-process-table class="process-bar" [tableValue]="devOpsExample"></component-process-table>
  </div>

  <div class="intro markdown second-header">
    <h4>它可以帮助您寻找最适合的软件工程技术实践</h4>
    <component-markdown-render class="home-markdown" [src]="'assets/docs/home.md'" [showScroll]="false"></component-markdown-render>
  </div>

  <div class="esp-insight">
    <div class="markdown">
      <h2 class="center">这就是 Ledge 知识平台</h2>
      <h3 class="center">沉淀我们的各种实践，向您提供全程的数据化变革策略、规划与咨询</h3>
    </div>
    <img src="/assets/images/esp.svg" alt="ESP Modeling">
  </div>

  <div class="contrib-section">
    <div class="markdown">
      <h2 class="center">Core Contributors</h2>
    </div>
    <div class="contributors">
      <div class="contributor" *ngFor="let user of contributors">
        <div class="avatar"><img src="{{user.avatar}}" alt=""></div>
        <div class="username"><a href="{{user.link}}">{{user.name}}</a></div>
        <div class="title">{{user.title}}</div>
        <div class="work">{{user.work}}</div>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="columns">
      <div class="rows">
        <div class="cell-title">资源</div>
        <div class="cell"><a href="https://github.com/phodal/ledge" target="_blank">Ledge 知识平台</a></div>
        <div class="cell"><a href="https://github.com/phodal/migration" target="_blank">《系统重构与迁移指南》</a></div>
      </div>
    </div>
  </div>
</div>
